<template>
  <div id="box" :class="modalClass" :confirmBtn='confirmBtn' :titles="titles">
    <div id="content" class="window" @click.stop="">
        <span class="toastText" v-html="reminderInfo">
<!--          {{reminderInfo}}-->
        </span>
        <div v-html="content"></div>
        <div class="setting">
          <button class="yellowbtn sure" @click.stop="callback">{{submitTxt}}</button>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: "DiaLogIknow",
    data(){
      return{
        introduce:'我知道了',
        showCover:false,
        reminderInfo:'',
        timeout:'',//定时器
        submitTxt : '',
        content : '',
        modalClass : 'modal-hide',
      }
    },
    props: {
      'titles': {
        /*组件中配置的提示文字*/
        type: String,
        default: '提示文字'
      },
      reminderContent : {
        /*提示内容*/
        type: String,
        default: ' '
      },
      'confirmBtn':{
        /*确定按钮文字*/
        type: String,
        default: '确定'
      }
    },
    mounted() {
      this.reminderInfo = this.titles ? this.titles  : '提示文字';
      this.submitTxt = this.confirmBtn ? this.confirmBtn  : '确定';
      this.content = this.reminderContent ? this.reminderContent : ' ';
      this.$emit('success');
    },
    methods:{
      changeToast(mes){
        //动态改变提示标题
        if( mes ){
          this.reminderInfo = mes;
        }
      },
      changeContent( html ){
        //动态改变提示内容
        if( html ){
          this.content = html;
        }
      },
      callback(){
        /*点击确定*/
        this.hide();
        this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow(){
        /*显示弹窗*/
        this.show();
      }
    },
    destroyed() {
      this.hide();
    }
  }
</script>

<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content{
    margin-top: -120px;top: 50%;left: 50%;
    padding:26px;padding-top:25px;padding-bottom: 25px;width: 450px;height:auto;position: fixed;margin-left: -225px;
    background: #fff;border-radius: 10px;overflow: hidden;z-index: 6;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  }
  .window{
    .toastText{text-align: center;font-size: 22px;display: block;line-height: 100%;padding-bottom: 25px;font-family: 'PingFang-SC-Bold'}
    .setting{
      text-align: center;width:100%;background: #fff;overflow: hidden;padding:20px 41px;padding-bottom: 0;
      button{
        margin: 0;padding:0;display: inline-block;
        box-sizing: border-box;width: 100%;border-radius:100px;.submit;color: #fff;height: 44px;line-height: 44px;font-size:18px;
      }
    }
  }
</style>
